<style lang="less" scoped>
a{
      display: block;
      color: inherit;
      text-decoration: none;
          width: 100%;
    height: 100%;
    }
    .banner{
    	width: 100%;
    	height: 6rem;
    	margin-bottom: .1rem;
    }
    img{
    	height: 100%;
    	width: 100%;
    }
    .div-box{
    	    width: 100%;
    margin-bottom: .2rem;
    display: inline-block;
    	.box-item{  
    		width: 50%;
    		height: 3rem;
    		float: left;
    		margin: .1rem 0;
    	}
    }
    .product-box{
      display: inline-block;
      margin: 0 .1rem;
      text-align: center;
      >div{
        width: 3.45rem;
        float: left;
        margin: .1rem;
        img{
          width: 100%;
          height: 3.45rem;
        }
        div{
          padding-top:.1rem;
          background: #f8605f;
        }
        span{
          display: block;
          line-height: .36rem;
        }
        .price{
            color: #fff;
            font-size: .24rem;
            margin-bottom: .1rem;
            line-height: .5rem;
        }
        .name{
          color: #fff;
          font-size: .22rem;
        }
      }
    }
</style>
<template>
    <div id="index">
        <div class='banner'>
        	<swipe :auto="4000">
                <template v-for='item in data["TYPE2"]'>
                     <swipe-item>
                     <a @click='go_a(item.URL)'>
                     <img :src="item.PIC_PATH"/>
                     </a>
                     </swipe-item>
                </template>
            </swipe>
        </div>
        <div class='div-box'>
        	<div class='box-item' v-for='item in data["TYPE3"]'>
        		<a @click='go_a(item.URL)'>
                    <img :src="item.PIC_PATH"/>
                </a>
        	</div>
        	
        </div>
        <div class='product-box' v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
            <div v-for='item in goods' >
            	<a @click='go_a(item.URL)'>
                <img :src="item.PIC_PATH">
                <div>
                  <span class='name'>{{item.NAME}}</span>
                  <span class='price'>￥{{item.PRICE}}</span>
                </div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
	import {Swipe, SwipeItem} from 'mint-ui'
    export default{
        data(){
            return {
            	goods:[],
            	tag:false,
            	data:''
            }
        },
        created(){
           var that = this;
           this.$ajax.post(URL+"/index.php/Index/GetModule", this.$qs.stringify({
                page:this.$route.params.id-0+1
            })).then(res => { 
           		that.data = res.data.data;
                this.$ajax.post(URL+"/index.php/Index/GetGoods",this.$qs.stringify({
                page:this.$route.params.id-0+1
            })).then(res => { 
                  that.goods = res.data.data.TYPE2
            })
        	})
        },
        filters: {
            
        },
        mounted(){
            
        },
        components:{
        	swipe:Swipe,
          swipeItem:SwipeItem,
        },
        methods:{
        	loadMore(){
          },
		  get_updete(id){
			var that = this;
           this.$ajax.post(URL+"/index.php/Index/GetModule", this.$qs.stringify({
                page:id-0+1
            })).then(res => { 
           		that.data = res.data.data;
                this.$ajax.post(URL+"/index.php/Index/GetGoods",this.$qs.stringify({
                page:id-0+1
            })).then(res => { 
                  that.goods = res.data.data.TYPE2
            })
        	})
		  },
		  go_a(url){
			var test = /#\/active\/(\d)/;
			if(test.test(url)){
				var id = test.exec(url)[1];
				this.get_updete(id);
			}else{
				url = url!=""?url:"javascript:void(0)"
				window.location.href = url;
			}
		  }
        }
    }
</script>
